<template>
  <view>

    <view class="tn-m tn-p tn-shadow tn-radius">
      <view class="tn-p tn-text-center">
        <view class="tn-flex tn-flex-center">
          <wd-img width="auto" height="200px" mode="heightFix"
                  show-menu-by-longpress :src="code?.wxQrcodeUrl"/>
        </view>
        <view class="tn-pt-sm tn-text-center tn-text-xs tn-gray-dark_text">长按保存二维码</view>
      </view>

      <wd-grid square :column="4" clickable>
        <wd-grid-item text="扫码人数" @itemclick="showQrcode">
          <template #icon>
            <view class="tn-text-bold tn-text-xl">{{ code?.scanCount || 0 }}</view>
          </template>
        </wd-grid-item>
        <wd-grid-item text="绑定人数" icon="picture">
          <template #icon>
            <view class="tn-text-bold tn-text-xl">{{ code?.bindCount || 0 }}</view>
          </template>
        </wd-grid-item>
        <wd-grid-item text="今天收益" icon="picture">
          <template #icon>
            <wd-text :text="code?.scanCount || 0" mode="'price" prefix="￥" size="20px"/>
          </template>
        </wd-grid-item>
        <wd-grid-item text="总收益" icon="picture">
          <template #icon>
            <wd-text :text="code?.scanCount || 0" mode="'price" prefix="￥" size="20px"/>
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>

    <wd-popup v-model="qrCodePopup" position="top" custom-class="tn-p">

    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import type {InventionCode} from "@/api/invention/model";
import {ref} from "vue";
import {createInventionCode, getInventionCode, getInventionWxQrcode} from "@/api/invention";

const code = ref<InventionCode>()

onLoad(async () => {
  let {data} = await getInventionCode()
  if (!data) data = (await createInventionCode()).data
  code.value = data
  if (!data.wxQrcodeUrl)
    code.value!.wxQrcodeUrl = (await getInventionWxQrcode()).data
})

</script>


<style scoped>
@import '@/iconfont/home/iconfont.css';
</style>
